<%@page import="com.jsh.util.Tools"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String clientIp = Tools.getLocalIp(request);
%>
<!DOCTYPE html>
<html>
  	<head>
    	<title>会员信息</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- 指定以IE8的方式来渲染 -->
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
    	<link rel="shortcut icon" href="<%=path%>/images/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="<%=path %>/js/easyui-1.3.5/themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="<%=path %>/js/easyui-1.3.5/themes/icon.css"/>
		<link type="text/css" rel="stylesheet" href="<%=path %>/css/common.css" />
		<script type="text/javascript" src="<%=path %>/js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="<%=path %>/js/easyui-1.3.5/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="<%=path %>/js/easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="<%=path %>/js/common/common.js"></script>
		<script src="<%=path %>/js/pages/manage/supplierCheckBox.js"></script>
		<script>
			var kid = ${sessionScope.user.id};
			var path = "<%=path%>";
			var clientIp = "<%=clientIp%>";
		</script>
  	</head>
  	<body>
  		<!-- 查询 -->
		<div id = "searchPanel"	class="easyui-panel" style="padding:10px;" title="查询窗口" iconCls="icon-search" collapsible="true" closable="false" >
			<%--TODO 增加功能--%>
			<div id="checkInfo">
				<div id="checkName">
					<fieldset  style="width: 200px">
						<legend>供应商 筛选表格数据</legend>
						<span id="checkSupplier">非会员</span><input type="checkbox" value="非会员" id="test1" name="searchName">
						<span id="checkSupplier2">hy00001</span><input type="checkbox" value="hy00001" name="searchName">
					</fieldset>
				</div>
				<div>
					<fieldset  style="width: 200px">
						<legend>联系人 数据不同行颜色不同</legend>
						武松<input type="checkbox" name="contacts" value="武松">
						李逵<input type="checkbox" name="contacts" value="李逵">
					</fieldset>
				</div>
				<div>
					<fieldset  style="width: 250px;">
						<legend>状态 某个单元格显示颜色</legend>
						禁用<input type="checkbox" name="enabled" value="禁用">
						启用<input type="checkbox" name="enabled" value="启用">
					</fieldset>
				</div>
				<%--可更改背景色--%>
				<div>
					<fieldset  style="width: 100px;">
						<legend>筛选row颜色</legend>
						红色<input type="radio" name="rowColor" value="red" checked>
						绿色<input type="radio" name="rowColor" value="green">
					</fieldset>
				</div>
				<div>
					<fieldset  style="width: 100px;">
						<legend>筛选cell颜色</legend>
						红色<input type="radio" name="cellColor" value="red" >
						黄色<input type="radio" name="cellColor" value="yellow" checked>
					</fieldset>
				</div>
			</div>
			<table id="searchTable" style="DISPLAY: none;">
				<tr>
					<div>
						<td>名&nbsp;&nbsp;&nbsp;&nbsp;称：</td>
						<td>
							<input type="text" name="searchSupplier" id="searchSupplier"  style="width:100px;"/>
						</td>
						<td>&nbsp;</td>
						<td>手机号码：</td>
						<td>
							<input type="text" name="searchTelephone" id="searchTelephone"  style="width:100px;"/>
						</td>
						<td>&nbsp;</td>
						<td>联系电话：</td>
						<td>
							<input type="text" name="searchPhonenum" id="searchPhonenum"  style="width:100px;"/>
						</td>
						<%--联系人--%>
						<td>联系人：</td>
						<td>
							<input type="text" name="" id="searchContacts"  style="width:100px;"/>
						</td>
						<%--状态--%>
						<td>状态：</td>
						<td>
							<input type="text" name="" id="searchEnable"  style="width:100px;"/>
						</td>
						<td>&nbsp;</td>
						<td id="searchDescLabel">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</td>
						<td>
							<input type="text" name="searchDesc" id="searchDesc"  style="width:100px;"/>
						</td>
						<td>&nbsp;</td>
					</div>
					<td>
						<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" id="searchBtn">查询</a>&nbsp;&nbsp;
						<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-redo" id="searchResetBtn">重置</a>
					</td>
				</tr>
			</table>
		</div>
		<!-- 数据显示table -->
		<div id = "tablePanel"	class="easyui-panel" style="padding:1px;top:300px;" title="会员信息列表" iconCls="icon-list" collapsible="true" closable="false">
			<table id="tableData" style="top:300px;border-bottom-color:#FFFFFF"></table>
		</div>
	    <div id="supplierDlg" class="easyui-dialog" style="width:600px;padding:10px 20px"
	            closed="true" buttons="#dlg-buttons" modal="true" collapsible="false" closable="true">
			<form id="supplierFM">
				<table>
					<tr>
						<td style="width: 80px;height: 20px">名称</td>
						<td style="width: 180px;padding:1px">
							<input name="supplier" id="supplier" class="easyui-validatebox" data-options="required:true,validType:'length[2,30]'" style="width: 160px;height: 20px"/>
						</td>
						<td style="width: 60px;height: 20px">联系人</td>
						<td style="width:180px;padding:1px;">
							<input name="contacts" id="contacts" field="contacts" class="easyui-validatebox" style="width: 160px;height: 20px"/>
						</td>
					</tr>
					<tr>
						<td>手机号码</td>
						<td style="padding:1px;">
							<input name="telephone" id="telephone" class="easyui-validatebox" style="width: 160px;height: 20px"/>
						</td>
						<td>电子邮箱</td>
						<td style="padding:1px">
							<input name="email" id="email" class="easyui-validatebox" validType="email" style="width: 160px;height: 20px"/>
						</td>
					</tr>
					<tr>
						<td>联系电话</td>
						<td style="padding:1px;">
							<input name="phonenum" id="phonenum" class="easyui-validatebox" style="width: 160px;height: 20px"/>
						</td>
						<td>传真</td>
						<td style="padding:1px">
							<input name="fax" id="fax" class="easyui-validatebox" style="width: 160px;height: 20px"/>
						</td>
					</tr>
					<tr>
						<td>期初应收</td>
						<td style="padding:1px">
							<input name="BeginNeedGet" id="BeginNeedGet" type="text" class="easyui-numberbox" data-options="min:0,precision:2" style="width: 160px;height: 20px" />
						</td>
						<td>期初应付</td>
						<td style="padding:1px">
							<input name="BeginNeedPay" id="BeginNeedPay" type="text" class="easyui-numberbox" data-options="min:0,precision:2" style="width: 160px;height: 20px" />
						</td>
					</tr>
					<tr>
						<td>累计应收</td>
						<td style="padding:1px">
							<input name="AllNeedGet" id="AllNeedGet" type="text" style="width: 160px;height: 20px" readonly="readonly" />
						</td>
						<td>累计应付</td>
						<td style="padding:1px">
							<input name="AllNeedPay" id="AllNeedPay" type="text" style="width: 160px;height: 20px" readonly="readonly" />
						</td>
					</tr>
					<tr>
						<td>纳税人识别号</td>
						<td style="padding:1px">
							<input name="taxNum" id="taxNum" class="easyui-validatebox" style="width: 160px;height: 20px"/>
						</td>
						<td>税率</td>
						<td style="padding:1px">
							<input name="taxRate" id="taxRate" class="easyui-validatebox" style="width: 160px;height: 20px"/>
						</td>
					</tr>
					<tr>
						<td>开户行</td>
						<td style="padding:1px">
							<input name="bankName" id="bankName" class="easyui-validatebox" style="width: 160px;height: 20px"/>
						</td>
						<td>账号</td>
						<td style="padding:1px">
							<input name="accountNumber" id="accountNumber" class="easyui-validatebox" style="width: 160px;height: 20px"/>
						</td>
					</tr>
					<tr>
						<td>地址</td>
						<td style="padding:1px" colspan="3">
							<input name="address" id="address" class="easyui-validatebox" style="width: 408px;height: 20px"/>
						</td>
					</tr>
					<tr>
						<td>备注</td>
						<td style="padding:1px" colspan="3">
							<textarea name="description" id="description" rows="2" cols="2" style="width: 408px;"></textarea>
						</td>
					</tr>
				</table>
			</form>
	    </div>
	    <div id="dlg-buttons">
	        <a href="javascript:void(0)" id="saveSupplier" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
	        <a href="javascript:void(0)" id="cancelSupplier" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#supplierDlg').dialog('close')">取消</a>
	    </div>
		<!-- 导入excel表格 -->
		<div id="importExcelDlg" style="padding:10px 20px">
			<form id="importExcelFM" method="post" enctype="multipart/form-data" action="<%=path%>/supplier/importExcelMember.action">
				<div class="fitem" style="padding:5px">
					<label>文件名称&nbsp;&nbsp;</label>
					<input name="supplierFile" id="supplierFile" type="file" style="width: 230px;height: 20px"/>
				</div>
				<div class="fitem" style="padding:5px">
					<label><b>导入注意</b>&nbsp;&nbsp;</label><span>（预收款、期初应收、期初应付、税率均为数值且要大于0；另外期初应收、期初应付不能同时输入）</span>
				</div>
				<div class="fitem" style="padding:5px;display: none;">
					<label>是否审查&nbsp;&nbsp;</label>
					<select id ="isCheck" name="isCheck" style="width: 230px;height: 20px">
						<option value="0">是</option>
						<option value="1" selected="selected">否</option>
					</select>
				</div>
				<input type="hidden" name="clientIp" id="clientIp" value="<%=clientIp %>"/>
				<div id="dlg-buttons5">
					<a href="javascript:void(0)" id="saveimport" class="easyui-linkbutton" iconCls="icon-ok">导入</a>
					<a href="javascript:void(0)" id="cancelimport" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#importExcelDlg').dialog('close')">取消</a>
				</div>
			</form>
		</div>
		<script>
            $(function () {
			    //设置搜索信息样式
                searchStyle();
                //搜寻供应商
                searchSupplier();
            })
            //设置搜索信息样式
			function searchStyle() {
                $("#checkInfo div").css("float", "left");
                $("#checkInfo fieldset").css("border-color", "#e6e6e6");
            }
            //设置搜寻供应商
            function searchSupplier() {
                /*
				(div)checkInfo 下的所有名字是searchName的input 点击事件
				如果点击：
				其它的checkbox都将是未选中状态，
				并把点击的这个checkbox的value写到id是searchSupplier的input里面
				然后点击 id 是 searBtn 的按钮进行搜索；
				如果点过的这个checkbox 取消勾选：
				点击id是searchResetBtn的按钮重置页面。
				*/
				$("#checkInfo :input[name='searchName']").click(function () {
                    if($(this).is(":checked")) {
                        $("#checkInfo :input[name='searchName']").not(this).attr("checked", false);
                        $("#searchSupplier").val($(this).val());
                        $("#searchBtn").click();
                    }else if($(this).attr("checked",false)) {
                        $("#searchResetBtn").click();
                    }
				})
            }
            //根据选择名字，指定所在行颜色
			var selectNames=[];
			$("#checkInfo :input[name='contacts']").click(function () {
                var field = $(this).attr('name');
				if($(this).is(":checked")) {
					selectNames.push($(this).val());
					var color=$("div :input[name=rowColor]:checked").val();
					changeRowColor(field,selectNames, color);
				}else if($(this).attr("checked",false)) {
					removeByValue(selectNames, $(this).val());
					var containsText = $(this).val();
					changeRowColorBack(field,containsText);
				}
			});
            /**
			 * 改变所在行颜色
             * @param field 同datagrid field 值
             * @param datas checkbox选择的选项名称数组
             * @param color 需要显示的背景色
             */
			function changeRowColor(field,datas,color) {
                for(var data in datas) {
                    $("div td[field='"+field+"'] :contains('"+datas[data]+"')").parent().parent().css("background",color);
                }
            }
            /**
			 * 取消所在行颜色
             * @param field 同datagrid field 值
             * @param containsText 取消的选项名称
             */
            function changeRowColorBack(field,containsText) {
                $("div td[field='"+field+"'] :contains('"+containsText+"')").parent().parent().css("background", "");
            }
            //根据选择状态，指定所在单元格颜色
            var selectStatus=[];
            $("#checkInfo :input[name='enabled']").click(function () {
                var field = $(this).attr('name');
                if($(this).is(":checked")) {
                    selectStatus.push($(this).val());
                    var color=$("div :input[name=cellColor]:checked").val();
                    changeCellColor(field,selectStatus, color);
                }else if($(this).attr("checked",false)) {
                    removeByValue(selectStatus, $(this).val());
                    var containsText = $(this).val();
                    changeCellColorBack(field,containsText);
                }
            });
            function changeCellColor(field,datas,color) {
                for(var data in datas) {
                    $("div td[field='"+field+"'] :contains('"+datas[data]+"')").parent().css("background",color);
                }
            }
            function changeCellColorBack(field,containsText) {
                $("div td[field='"+field+"'] :contains('"+containsText+"')").parent().css("background", "");
            }
            //checkbox取消某个选择，数组内将其删除
            function removeByValue(arr, val) {
                for(var i=0; i<arr.length; i++) {
                    if(arr[i] == val) {
                        arr.splice(i, 1);
                        break;
                    }
                }
            }
		</script>
	</body>
</html>